<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getUserInfo, getUserTaskReport } from '@/apis/user.js'
  import { ref } from 'vue'

  // 用户信息
  const userInfo = ref({})
  // 用户任务数据
  const userTaskInfo = ref({})

  onLoad(async () => {
    const cur = new Date()
    const [res1, res2] = await Promise.all([
      getUserInfo(),
      getUserTaskReport({
        year: cur.getFullYear(),
        month: (cur.getMonth() + 1 + '').padStart(2, '0'),
      }),
    ])
    userInfo.value = res1.data
    userTaskInfo.value = res2.data
    console.log(userInfo.value)
  })

  // 打开地图
  async function testMap() {
    console.log(111)
    const res = await uni.chooseLocation()
    console.log(res, 'res')
  }
</script>

<template>
  <view class="page-container">
    <view class="user-profile">
      <image class="avatar" src="/static/images/avatar_2.png" mode=""></image>
      <text class="username">{{ userInfo.name }}</text>
      <text class="no">司机编号：{{ userInfo.number }}</text>
      <text class="mobile"
        >手机号码：{{ userInfo.phone?.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1 $2 $3') }}</text
      >
    </view>
    <view class="month-overview">
      <view class="title">我的任务</view>
      <view class="content">
        <view class="item">
          <text class="volumn">{{ userTaskInfo.taskAmounts }}</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ userTaskInfo.completedAmounts }}</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ userTaskInfo.transportMileage }}</text>
          <text class="label">运输里程(km)</text>
        </view>
      </view>
    </view>
    <view class="entry-list">
      <uni-list :border="false">
        <uni-list-item to="/subpkg_user/truck/index" showArrow title="车辆信息" />
        <uni-list-item to="/subpkg_user/task/index" showArrow title="任务数据" />
        <uni-list-item to="/subpkg_user/settings/index" showArrow title="系统设置" />
        <!-- uni-list-item 要监听 click 事件，必须开启 clickable -->
        <uni-list-item showArrow title="测试地图" clickable @click="testMap" />
      </uni-list>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
